<template>
	<view style="">
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="银行提现账户"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">
		
		</view>
		<view class="" style="width: 92%;margin: 0 auto;padding-top: 15px;z-index: 1;position: relative;">
			<view class="flex" style="justify-content: space-around;align-items: flex-start;">
				<view class="flex" style="flex-direction: column;al">
					<image style="width: 30px;height: 30px;" src="/static/font/31.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #0C3283;padding-top: 10px;">实名认证</text>
				</view>
				<view class="" style="width: 54px;height: 3px;background: #D4E5F8;border-radius: 70px 70px 70px 70px;margin-top: 15px;">
					
				</view>
				<view class="flex" style="flex-direction: column;">
					<image style="width: 30px;height: 30px;" src="/static/font/34.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #999999;padding-top: 10px;">绑定支付宝</text>
				</view>
				<view class="" style="width: 54px;height: 3px;background: #D4E5F8;border-radius: 70px 70px 70px 70px;margin-top: 15px;">
					
				</view>
				<view class="flex" style="flex-direction: column;">
					<image style="width: 30px;height: 30px;" src="/static/font/35.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #999999;padding-top: 10px;">填写银行卡</text>
				</view>
			</view>
			<view style="border-radius: 10px;margin-top: 12px;">
				<view style="padding-bottom: 15px;">
					<view style="border-radius: 10px;">
						<view style="padding: 15px ;background-color: #fff;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="card_phone" placeholder="请输入银行卡卡号" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入银行卡卡号" border="none">
									<!-- #endif -->
									<u--text class="tit" text="银行卡卡号" slot="prefix" margin="0 15px 0 0" type="tips">
									</u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
						<view style="padding: 15px ;background-color: #fff;margin-top: 12px;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="card_yl" placeholder="请输入预留手机号" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入预留手机号" border="none">
									<!-- #endif -->
									<u--text class="tit" text="预留手机号" slot="prefix" margin="0 15px 0 0" type="tips">
									</u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
						<view style="padding: 15px ;background-color: #fff;margin-top: 12px;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="khh" placeholder="请输入开户银行" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入开户银行" border="none">
									<!-- #endif -->
									<u--text class="tit" text="开户银行" slot="prefix" margin="0 15px 0 0" type="tips">
									</u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>

					</view>

				</view>
				<view class="flex">
					<u-icon name="info-circle-fill" color="#FFA724" size="18"></u-icon>
					<view style="margin-left: 3px;font-size: 14px;color: #FFA724;font-weight: 400;">请绑定本人身份账号，若错误将导致无法打款
					</view>
				</view>


			</view>
			<view @click="step" style="margin-top: 15px;">
				<u-button shape='circle' type="primary" text="下一步"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				card_phone: '',
				card_yl: '',
				khh: '',
				ali_code: '',
				ali_name: '',
				bgColor: 'rgba(255,255,255,0)',
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		onLoad(e) {
			this.ali_code = JSON.parse(decodeURIComponent(e.ali_code))
			this.ali_name = JSON.parse(decodeURIComponent(e.ali_name))
		},
		methods: {
			async htong() {
				let res = await this.$http.index.getContracts()
				console.log(res);
				if (res.code == 1) {
					// #ifdef H5
					location.href = res.data.results[0].sign_url
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(res.data.results[0].sign_url)
					// #endif
				}
			},
			async step() {
				let res = await this.$http.index.bindBank({
					bank_card: this.card_phone,
					bank_name: this.khh,
					alipay_account: this.ali_code
				})
				console.log(res);
				if (res.code == 1) {
					// this.htong()
					uni.switchTab({
						url: '/pages/index/me'
					})
				} else {
					this.$tips(res.msg)
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	/deep/ .uicon-info-circle-fill {
		// line-height: normal !important;
	}

	/deep/.u-text__value--tips {
		font-weight: 400 !important;
		color: #1D1F20 !important;
	}

	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF,
	}
</style>
<style>
	page {
		background-color: #F7F9FA;
	}
</style>